<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: black;
        }

        li {
            list-style: none;
        }

        body {
            background: url(https://ts1.tc.mm.bing.net/th/id/OIP-C.fTSFmrK2M8VJfEmcxy46TAHaNJ?w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2)
        }

        .box {
            width: 600px;
            height: 600px;
            background-color: white;
            margin: 10px auto 0;
            border-radius: 30px;
            background-color: #fae3d9;
            overflow: hidden;
            border: 2px solid black;
        }

        .add-box {
            width: 530px;
            height: 60px;
            text-align: center;
            margin: 40px auto;
            border: 2px solid black;
            background-color: pink;
            border-radius: 5px;
        }

        .add-box input {
            width: 446px;
            height: 56px;
            float: left;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        a:hover {
            color: black;
        }

        .add-box span {
            width: 46px;
            height: 56px;
            float: left;
            color: black;
            line-height: 56px;
            margin: 0 0 0 15px;
        }

        .content-box {
            width: 500px;
            height: 500px;
            margin: 30px auto;
            border-radius: 30px;
            overflow: hidden;
            text-align: center;
        }

        .content-box ul {
            width: 500px;
            height: 400px;
            margin: 10px auto;
            text-align: left;
            /* display: none; */
        }
        .content-box li{
            width: 500px;
            height: 50px;
            line-height: 50px;
            text-align: left;
            border: 2px solid black;
            border-radius: 5px;
            margin: 10px 0 ;
            
        }
        .content-box li button{
            background-color: #71c9ce;
            width: 100px;
            height: 30px;
            border-radius: 30px;
        }
        .xiaobox {
            width: 150px;
            height: 150px;
            background-color: #71c9ce;
            position: absolute;
            top: 300px;
            right: 300px;
            border: 2px solid black;
            border-radius: 30px;
            text-align: center;
            line-height: 27px;
            overflow: hidden;
        }

        .xiaobox li {
            width: 146px;
            height: 30px;
            border-radius: 10px;
        }

        .xiaobox ul li:nth-child(1) {
            background-color: #ffc7c7;
        }

        .xiaobox ul li:nth-child(2) {
            background-color: #e3fdfd;
        }

        .xiaobox ul li:nth-child(3) {
            background-color: #cbf1f5;
        }

        .xiaobox ul li:nth-child(4) {
            background-color: #a6e3e9;
        }

        hr {
            border: solid;
        }

        img {
            width: 200px;
            height: 200px;
        }

        .image {
            position: relative;
            left: 750px;
        }
    </style>
</head>

<body>
    <div class="image"><img src="https://www.ricocc.com/todo/assets/img/todo.svg" alt=""></div>
    <div class="box">
        <div class="add-box">
            <input type="text">
            <span onclick="add()"><a href="#">提交</a></span>
        </div>
        <div class="content-box">
            今日事今日毕，勿将今事待明日!
            <hr size="5px">
            <ul>
            </ul>
        </div>
    </div>
    <div class="xiaobox">
        <div class="kai" onclick="kaiguan()">
            <a href="#"> <span>开</span></a>
        </div>
        <ul>
            <li onclick="quan()">
                <span><a href="#">全部显示</a></span>
            </li>
            <li onclick="look_fini()">
                <span><a href="#">已完成</a></span>
            </li>
            <li onclick="look_no()">
                <span><a href="#">进行中</a></span>
            </li>
            <li onclick="clea()">
                <span><a href="#">清除全部</a></span>
            </li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //数据
        var arr = [{
            id: 1,
            name: '我欲乘风破浪，又恐琼楼玉宇',
            is: false,

        },]
        //渲染
        function xuanran() {
            $('.content-box ul').html('')
            arr.forEach(item => {
                $('.content-box ul').append(`
                <li>
                    <input type="checkbox" ${item.is == true ? 'checked' : ''} onclick='fini(${item.id})'>
                    <span>${item.name}</span>
                    <button onclick='delata(${item.id})'>删除</button>
                </li>
                `)
            })
            $('.content-box ul li').odd().css('background','#a6e3e9')
            $('.content-box ul li').even().css('background','#e3fdfd')
        }
        xuanran()
        //添加
        function add() {
            //获取添加的内容
            $('.content-box ul').css('display', 'block')
            if ($('.add-box input').val() != '') {
                var a = $('.add-box input').val()
                arr.push({
                    id: arr.length + 1,
                    name: a,
                    is: false
                })
                xuanran()
                $('.add-box input').val('')
            } else {
                alert('请填写内容')
            }
        }
        //删除
        function delata(id) {
            console.log(id)
            var a = arr.findIndex(item => item.id == id)
            arr.splice(a, 1)
            xuanran()
        }
        var look_finishi_arr = []
        //完成事项
        function fini(i) {
            var a = arr.find(item => item.id == i)
            if (a.is == false) {
                a.is = true
                look_finishi_arr.push({
                    id: a.id,
                    name: a.name,
                    is: a.is
                })
            }
        }
        // 开关
        function kaiguan() {

            if ($('.xiaobox .kai span').html() == '开') {
                $('.xiaobox ul').css('display', 'none')
                $('.xiaobox').css('height', '40px')
                $('.xiaobox .kai span').html('关')
            } else if ($('.xiaobox .kai span').html() == '关') {
                $('.xiaobox ul').css('display', 'block')
                $('.xiaobox .kai span').html('开')
                $('.xiaobox').css('height', '150px')
            }
        }
        //清除全部
        function clea() {
            look_finishi_arr = []
            look_Notdone_arr = []
            arr = []
            xuanran()
        }
        //全部显示
        function quan() {
            $('.content-box ul').css('display', 'block')
            xuanran()
        }
        //查看完成的
        function look_fini() {
            $('.content-box ul').html('')
            look_finishi_arr.forEach(item => {
                $('.content-box ul').append(`
                <li>
                    <input type="checkbox" ${item.is == true ? 'checked' : ''} onclick='fini(${item.id})'>
                    <span>${item.name}</span>
                    <button onclick='delata(${item.id})'>删除</button>
                </li>
                `)
            })
        }
        //进行中
        function look_no() {
            var a = arr.filter(item => item.is == false)
            $('.content-box ul').html('')
            a.forEach(item => {
                $('.content-box ul').append(`
                <li>
                    <input type="checkbox" ${item.is == true ? 'checked' : ''} onclick='fini(${item.id})'>
                    <span>${item.name}</span>
                    <button onclick='delata(${item.id})'>删除</button>
                </li>
                `)
            })
        }
    </script>
</body>

</html>